<template>
  <div class="p-2">
    <Row :gutter="[4, 16]">
      <Col :span="6">
      <Card title="tree示例">
        <div class="infoArea">
          <BasicTree ref="treeRef" title="演示树" search toolbar checkable :treeData="treeData1" :loading="loading" @select="onSelect" @check="onCheck" :checkedKeys="checkedKeys" />
        </div>
      </Card>
      </Col>
      <Col :span="9">
      <Card title="api-说明（上面为封装属性，下面为官方的属性）">
        <div class="infoArea">
          <ul>
            <li v-for="(item, index) in apiList" :key="index">
              <span>-</span>
              <span class="colorSpan">{{ item.word }}</span>
              {{ item.note }}
            </li>
            <a-divider>原生</a-divider>
             <!-- 默认水平分割线 -->
            <li v-for="(item, index) in api1List" :key="index">
              <span>-</span>
              <span style="color:brown"><strong>{{ item.word }}</strong></span>
              {{ item.note }}
            </li>
          </ul>
        </div>
      </Card>
      </Col>
      <Col :span="9">
      <Card title="method-说明">
        <div class="infoArea">
          <ul>
            <li v-for="(item, index) in methodList" :key="index">
              <span>-</span>
              <span style="color:brown"><strong>{{ item.word }}</strong></span>
              {{ item.note }}
            </li>
          </ul>
        </div>
      </Card>
      </Col>
    </Row>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed, unref, nextTick } from 'vue';
import './common/common.less';
import { BasicTree,TreeItem, TreeActionType } from '/@/components/Tree';
import { treeData } from './common/demoData';

import { Card, Row, Col, Spin } from 'ant-design-vue';
import { useMessage } from '/@/hooks/web/useMessage'; // 轻提醒
const { createMessage: $message } = useMessage(); // 解构

const loading = ref(true);
const apiList = ref([
  { word: "treeData", note: "树组件数据" },
  { word: "rightMenuList", note: "	右键菜单列表" },
  { word: "checkedKeys", note: "	勾选的节点（复选框）" },
  { word: "selectedKeys", note: "	选中的节点	" },
  { word: "expandedKeys", note: "	展开的节点	" },
  { word: "actionList", note: "	鼠标移动上去右边操作按钮列表" },
  { word: "title", note: "	定制标题字符串	" },
  { word: "toolbar", note: "	是否显示工具栏" },
  { word: "search", note: "	显示搜索框	" },
  { word: "clickRowToExpand", note: "	是否在点击行时自动展开" },
  { word: "beforeRightClick", note: "	右键点击回调，可返回右键菜单列表数据来生成右键菜单" },
  { word: "rightMenuList", note: "	右键菜单列表数据	" },
  { word: "defaultExpandLevel", note: "	初次渲染后默认展开的层级" },
  { word: "defaultExpandAll	", note: "初次渲染后默认全部" },
  { word: "searchValue(v-model)", note: "	当前搜索词" },
  { word: "select", note: "文本选中 (k, { selected,selectedNodes, node, event })" },
  { word: "check", note: "复选框选中（keys, info)" },
]);
const api1List = ref([
  { word: "disabled", note: "禁用" },
  { word: "checkable", note: "显示复选框" },
  { word: "draggable", note: "可拖拽" },
  
]);
const methodList = ref([
  { word: "filterByLevel", note: "展开的级别（1:展开一级节点 2：展开二级节点）" },
  { word: "checkAll", note: "		选择所有" },
  { word: "expandAll	", note: "	展开所有" },
  { word: "setExpandedKeys	", note: "	设置展开节点" },
  { word: "getExpandedKeys	", note: "	获取展开节点" },
  { word: "setSelectedKeys	", note: "	设置选中节点" },
  { word: "getSelectedKeys	", note: "	获取选中节点" },
  { word: "setCheckedKeys	", note: "	设置勾选节点" },
  { word: "getCheckedKeys	", note: "	获取勾选节点" },
  { word: "filterByLevel	", note: "	显示指定等级" },
  { word: "insertNodeByKey	", note: "	插入子节点到指定节点内" },
  { word: "deleteNodeByKey	", note: "	根据 key 删除节点" },
  { word: "updateNodeByKey	", note: "	根据 key 更新节点" },
  { word: "setSearchValue	", note: "	设置当前搜索词（v2.7.1）" },
  { word: "getSearchValue", note: "	获取当前搜索词(v2.7.1)" },
]);
const treeData1 = ref<Array<TreeItem>>([]);
const treeRef = ref<Nullable<TreeActionType>>(null);
//已选择的值
const checkedKeys = ref<Array<string | number>>([]);

// 默认执行一次
onMounted(async () => {
  setTimeout(() => {
    treeData1.value = treeData;
    nextTick(() => {
      //默认展开第一级
      unref(treeRef)?.filterByLevel(1);
      loading.value = false;
    });
  }, 200);
});

/**
 * 树节点-文本选中
 * (keys, info) -> (k, { selected,selectedNodes, node, event })
 */
function onSelect(keys, info) {
  $message.info('文本选中了....'+keys+info.selected);
}

/**
 * 树节点-复选框选中
 */
function onCheck(keys, info) {
  $message.info('复选框选中了....'+keys,info);
}

// Emits声明
const emit = defineEmits(['register', 'success']);

/**
 * 实体类点击事件
 */
function handleEntityClick(item) {
  $message.info('实体类跳转中....' + item);
}

</script>

<style lang="less" scoped>
/** 时间和数字输入框样式 */
:deep(.ant-input-number) {
  width: 100%;
}

:deep(.ant-calendar-picker) {
  width: 100%;
}

:deep(.ant-col) {
  width: 100%;
  padding-right: 0px;
}

.infoArea {
  // display: flex;
  // justify-content: space-between;
  // padding: 0 10%;
  width: 100%;
  // height: 100%;
  height: 800px;
}
</style>